<!DOCTYPE html>
<html lang="en">
<head>
    <title> </title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <style>
        .pager { display: inline-block; font: 12 px/21px "宋体"; margin-top: 20px; }
            .pager a, .pager .flip, .pager .curPage { border: 1px solid #e3e3e3; display: inline-block; height: 22px; line-height: 22px; text-align: center; }
            .pager a { background: none repeat scroll 0 0 #fff; color: #010101; text-decoration: none; width: 26px; }
                .pager a:hover { background: none repeat scroll 0 0 #f1f1f1; }
            .pager .noPage { color: #a4a4a4; }
            .pager .curPage { background: none repeat scroll 0 0 #49abde; color: #ffffff; width: 26px; }
            .pager .flip { width: 56px; }
    </style>
</head>
<body>
    <div>
        <div class="pager">

        </div>
        <div class="pager_class">

        </div>
    </div>
    <input id="setIndex" value="设置页码为3（第4页）" type="button" />
    <input id="getIndex" value="获取当前页码" type="button" />
    <input id="setCount" value="设置项数为100" type="button" />
    <script src="http://luopq.com/demo/lib/jquery-1.10.2.min.js"></script>
    <script src="../src/jquery.pager.js"></script>
    <script>


        var pager = $(".pager").pager();
        $("#setIndex").on("click", function () {
            pager.setPageIndex(3);
        })
        $("#getIndex").on("click", function () {
            alert(pager.getPageIndex(3));
        })
        $("#setCount").on("click", function () {
            pager.setItemCount(100);
        })
        
        // click page link print page num
        $(".pager_class").pager({
                pageIndex: 0,
                pageSize: 10,
                itemCount: 50,
                maxButtonCount: 3,
                callback:function(p) {
                    console.log(p); // print current page num
                }
            });
    </script>
</body>
</html>
